<template>
  <el-col>
    <el-row>
      <el-button type="primary" icon="el-icon-plus" @click="handleCreateTask">创建任务</el-button>
    </el-row>
    <el-row>
      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="作业编号" width="100"></el-table-column>
        <el-table-column prop="name" label="作业名称" width="100"></el-table-column>
        <el-table-column label="跳转页面" width="400">
          <template slot-scope="scope">
            <div style="display: inline-block" v-for="(page,index) in scope.row.pageJumps" v-bind:key="index">
              <el-tag size="medium" style="margin-left: 10px;">{{page}}</el-tag>
              <i class="el-icon-caret-right" v-show="index===scope.row.pageJumps.length-1?false:true" ></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="userGroupName" label="用户组名称" width="200"></el-table-column>
        <el-table-column prop="status" label="运行状态" width="100">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status === '运行中' ? 'danger' : 'success'"
              disable-transitions
            >{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="timeRange" label="时间段" width="400"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              @click="handleExecute(scope.row.id)"
              :disabled="scope.row.status === '运行中' ? true : false"
            >执行作业</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog title="页面选择" :visible.sync="pageDialogVisible">
      <el-form :model="form">
        <el-row>
          <el-form-item label="作业名" :label-width="formLableWidth">
            <el-col :span="7">
              <el-input v-model="form.name"></el-input>
            </el-col>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="选择用户组" :label-width="formLableWidth">
            <el-select v-model="form.userGroupId" placeholder="下拉选择用户组">
              <el-option
                v-for="item in userGroupOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="选择时间段" :label-width="formLableWidth">
            <el-date-picker
              style="width: 60%"
              v-model="form.timeRange"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            ></el-date-picker>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="选择页面" :label-width="formLableWidth">
            <el-col :span="10">
              <el-cascader
                placeholder="下拉选择页面"
                :options="options"
                v-model="form.selectedOptions"
                @change="handleOptionsChange"
              ></el-cascader>
              <el-button
                icon="el-icon-delete-solid"
                @click="handleCancel"
                style="background-color: #409eff;color:white"
              >撤销</el-button>
            </el-col>
          </el-form-item>
        </el-row>
        <el-row class="step-bar">
          <el-steps :active="steps.length-1" finish-status="success">
            <el-step v-for="(item,index) in steps" v-bind:key="index" :title="item.title"></el-step>
          </el-steps>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="pageDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </el-col>
</template>


<script>
import * as request from "@net";

export default {
  methods: {
    handleExecute(id) {
      request.execPageJumpTask(id,({msg}) =>{
        this.$notify({
          title: "成功",
          message: msg,
          type: "success"
        });
        this.fillTableData();
      })
    },
    handleCreateTask() {
      this.fillData();
      this.pageDialogVisible = true;
    },
    handleSubmit() {
      this.loading = true;
      var pageJumpTask = {
        name: this.form.name,
        pageJumps: this.steps.map(({value})=>value),
        userGroup: this.form.userGroupId,
        startTime: this.form.timeRange[0],
        endTime: this.form.timeRange[1]
      };
      // console.log(pageJumpTask);
      request.addPageJumpTask(pageJumpTask, () => {
        this.$notify({
          title: "成功",
          message: "创建任务成功",
          type: "success"
        });
        this.fillTableData();
        this.pageDialogVisible = false;
      });
    },
    handleOptionsChange(optionValue) {
      this.options.forEach(element => {
        var _this = this;
        if (element.value == optionValue[0]) {
          element.children.forEach(subElement => {
            if (subElement.value == optionValue[1]) {
              _this.steps.push({
                title: subElement.label,
                value: subElement.value,
                option: optionValue
              });
              subElement.disabled = true;
            }
          });
        }
      });
    },
    handleCancel() {
      if (this.steps.length === 0) return;
      // 移除最后一步
      var currentOption = this.steps[this.steps.length - 1].option;
      this.steps.splice(this.steps.length - 1, 1);
      this.options.forEach(element => {
        if (element.value == currentOption[0]) {
          element.children.forEach(subElement => {
            if (subElement.value == currentOption[1]) {
              subElement.disabled = false;
            }
          });
        }
      });
    },
    fillData() {
      request.getPageJumpList("", ({ data }) => {
        this.options = data.map(({ id, name, subPageJump }) => {
          return {
            value: id,
            label: name,
            children: subPageJump.map(({ id, name }) => {
              return {
                value: id,
                label: name
              };
            })
          };
        });
      });
      request.findUserGroup("", ({ data }) => {
        this.userGroupOptions = data.map(userGroup => {
          return {
            label: userGroup.name,
            value: userGroup.id
          };
        });
      });
    },
    fillTableData() {
      this.tableData = [];
      this.loading = true;
      request.getPageJumpTaskList(({ data }) => {
        this.tableData = data.map(aPageJumpTask => {
          return {
            id: aPageJumpTask.id,
            name: aPageJumpTask.name,
            pageJumps: aPageJumpTask.pageJumps.map(({ name }) => name),
            userGroupName: aPageJumpTask.userGroup.name,
            status: aPageJumpTask.status,
            timeRange: aPageJumpTask.startTime + "至" + aPageJumpTask.endTime
          };
        });
        this.loading = false;
      });
    }
  },
  data() {
    return {
      loading: true,
      form: { name: "", selectedOptions: [], timeRange: [], userGroupId: "" },
      tableData: [],
      pageDialogVisible: false,
      userGroupOptions: [],
      options: [],
      choosedOptions: [],
      steps: [],
      formLableWidth: "150px",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  created() {
    this.fillTableData();
  }
};
</script>

<style scoped>
.el-row {
  margin-top: 10px;
  margin-left: 10px;
}
.el-col {
  border-radius: 4px;
}
.step-bar {
  margin-top: 30px;
}
</style>


